<template>
    <div class="order_catchjd">

        <div class="team">
            <div class="powertop">
                <router-link class="powertopli powertopact" to="/order_catchlinshi/order_catchjd">京东抓单</router-link>
                <router-link class="powertopli" to="/order_catchlinshi/order_catchpdd">拼多多抓单</router-link>
				<router-link class="powertopli" to="/order_catchlinshi/order_catchyz">有赞抓单</router-link>
                <router-link class="powertopli" to="/order_catchlinshi/order_catchtm">天猫抓单</router-link>
            </div>
            <div class="centerall">
                <div class="t-img">
                    <img src="../../../static/img/catchjd.png">
                    <span class="t-email" @click="mobileshow">设置短信报警</span>
                </div>
                <div class="t-con" v-loading="loading">
                	<div class="list" style="margin-bottom: 10px;">
                		<div class="th">店铺名称</div>
                		<div class="th">抓单时间</div>
                		<div class="th">cookie状态</div>
                        <div class="th td3">操作</div>
                	</div>
                	<div class="list" v-for="item in list" :key="item.id">
                		<div class="td td2">{{item.shop_name}}</div>
                		<div class="td">
                            <div>开始时间：{{item.fetch_start_at}}</div>
                            <div>结束时间：{{item.fetch_end_at}}</div>
                        </div>
                        <div class="td td2">{{item.stat}}<div class="cookiechange" @click="showlog(item.id)"><i class="el-icon-edit" style="color: #409eff;"></i></div></div>
                        <div class="td3 td td2">
                            <!-- <el-button type="primary" size="mini" v-if="item.is_run == 0 && item.is_login != 2" @click="showlog(item.id)">开始抓单</el-button>

                            <el-button type="primary" size="mini" v-if="item.is_run == 1" :loading="true">抓单中</el-button>
                            <el-button type="primary" size="mini" v-if="item.is_run == 1" plain @click="stop(item.id)">暂停抓单</el-button>

                            <span style="margin-right: 10px;" v-if="item.cookie != '' && item.is_run == 0 && item.is_login == 2">抓单已暂停</span>
                            <el-button type="primary" size="mini" v-if="item.cookie != ''  && item.is_run == 0 && item.is_login == 2" plain @click="showlog(item.id)">继续抓单</el-button>
                            <el-button type="primary" size="mini" @click="loudanchoose(item.id)">漏单补抓</el-button> -->
                            <span style="margin-right: 10px;" v-if="item.is_run == 1 && item.is_login == 1">抓单已开启</span>
                            <el-button v-if="item.is_run == 0 && item.is_login != 1" type="primary" size="mini" @click="gocatch(item.id)">开启抓单</el-button>
                            <!-- <el-button v-if="item.is_run == 1 && item.is_login == 1" type="danger" size="mini" @click="stop(item.id)">停止抓单</el-button> -->
                            <el-button type="primary" plain size="mini" @click="loudanchoose(item.id)">漏单补抓</el-button>
                            <el-button type="text" size="mini" @click="seelogs(item.id,item.shop_name)">查看抓单失败记录</el-button>
							<el-button type="danger" plain size="mini" @click="shanchu(item.id)">删除</el-button>
                        </div>
                	</div>
					<div class="addshop"><el-button type="primary" size="mini" @click="addshplog = true"><i class="el-icon-plus"></i>申请添加店铺</el-button></div>
                	<div class="getcookie">
                        <div style="color: #ff253f;">cookie说明：cookie影响抓单、发货和备注同步，请保持可用状态</div>
                        <h3>cookie的获取方法：</h3>
                        <div>1、登录京东店铺商家后台</div>
                        <div>2、左侧菜单点击“订单查询与跟踪”，进入页面</div>
                        <div>3、按下F12（或者在设置菜单）中进入开发者模式，点击右上角开发者模式的“network”（部分浏览器在底部显示）。</div>
                        <div v-if="!hide"><el-button @click="hide = true" type="primary" size="mini">展开查看详细教程<i class="el-icon-caret-bottom"></i></el-button></div>
                        <div v-if="hide"><el-button @click="hide = false" type="primary" size="mini">展开查看详细教程<i class="el-icon-caret-top"></i></el-button></div>
                        <div v-if="hide">
                            <div>4、</div>
                            <div><img src="../../../static/img/jd1.png" /></div>
                            <div>5、点击查询订单按钮，无需设置条件，可以看到开发者窗口中network中的内容开始变化。</div>
                            <div><img src="../../../static/img/jd2.png" /></div>
                            <div>6、在开发者窗口点击选中name框内的第一个文件，在右侧的headers框内下拉找到cookie，复制冒号后面的内容到 referer上面为止（图示：</div>
                            <div><img src="../../../static/img/jd3.png" /></div>
                            <div>7、粘贴内容到cookie框</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <el-dialog title="cookie登录" :visible.sync="log" :close-on-click-modal="false" width="600px">
            <div>
                <el-input type="textarea" placeholder="请输入cookie" v-model="cookies" rows="15"></el-input>
                 <!-- :picker-options="timerule" -->
                <div style="margin-top: 20px;">抓单开始时间：<el-date-picker v-model="time" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" placeholder="选择日期时间"></el-date-picker></div>
                <div class="autotidan">
                  <div class="xin"><span class="xins">新</span></div>
                  <div class="check"><input type="checkbox" v-model="autotidan" />暂停订单自动信息审核通过</div>
                  <div class="see">
                    <el-tooltip placement="top">
                      <div slot="content">勾选后将自动审核“京东订单查询页的暂停订单”（该功能需要运行抓单）</div>
                      <div>查看说明</div>
                    </el-tooltip>
                  </div>
                </div>
                <div class="autotidan"  style="line-height: 36px;">
                  <div class="xin"><span class="xins">新</span></div>
                  <div class="check">抓单后更改旗帜颜色</div>
                  <div class="see">
                    <el-select v-model="flag" clearable placeholder="选择颜色">
                        <el-option label="灰" value="0">
                          <span style="float: left">
                            <div class="color1"></div>
                          </span>
                          <span class="color1s">灰</span>
                        </el-option>
                        <el-option label="红" value="1">
                          <span style="float: left">
                            <div class="color2"></div>
                          </span>
                          <span class="color2s">红</span>
                        </el-option>
                        <el-option label="黄" value="2">
                          <span style="float: left">
                            <div class="color3"></div>
                          </span>
                          <span class="color3s">黄</span>
                        </el-option>
                        <el-option label="绿" value="3">
                          <span style="float: left">
                            <div class="color4"></div>
                          </span>
                          <span class="color4s">绿</span>
                        </el-option>
                        <el-option label="蓝" value="4">
                          <span style="float: left">
                            <div class="color5"></div>
                          </span>
                          <span class="color5s">蓝</span>
                        </el-option>
                        <el-option label="紫" value="5">
                          <span style="float: left">
                            <div class="color6"></div>
                          </span>
                          <span class="color6s">紫</span>
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </div>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="log = false">取 消</el-button>
                <el-button type="primary" @click="gocookie">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="手机号设置" :visible.sync="mlog" :close-on-click-modal="false" width="600px">
            <div>
                <el-input v-model="mobile" placeholder="请输入手机号"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="mlog = false">取 消</el-button>
                <el-button type="primary" @click="gomobile">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="申请添加店铺" :visible.sync="addshplog" :close-on-click-modal="false" width="600px">
            <div>
                <el-input v-model="addshopname" placeholder="请输入店铺名"></el-input>
            </div>
            <div style="margin-top:20px; color:#999;">
              注：成功提交后我们将在工作日内48小时配置好，届时可操作抓单。
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addshaopf">提交申请</el-button>
            </span>
        </el-dialog>
        <el-dialog title="漏单补抓" :visible.sync="loudanlog" :close-on-click-modal="false" @close="clearText" width="600px">
          <div style="color: #ff253f;">注：补抓单号之间，请使用英文逗号分隔</div>
            <div>
                <el-input type="textarea" placeholder="请输入补抓单号用','分隔" v-model="loudannum" rows="15"></el-input>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="loudanlog = false">取 消</el-button>
                <el-button type="primary" @click="loudan">确 定</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
    import axios from 'axios'
    export default{
    	name : "order_catchjd",
    	data(){
    		return {
              flag:"",
              loudanlog:false,
              loudannum:"",
              chooseid:"",
              autotidan:false,
    	        loading:true,
    	        list:"",
    	        hide:false,
    	        log:false,
    	        cookies:"",
    	        mobile:"",
              mlog:false,
              addshplog:false,
              addshopname:"",
    	        id:"",
    	        time:[],
    	        // timerule:{
    	        //     disabledDate(time) {
    	        //         var time1 = Date.now() - 3600 * 1000 * 24 * 4
    	        //         return time.getTime() < time1
    	        //     },
    	        // },
                mobileid:""
    		}
    	},
    	created() {
    	   this.getlist();
    	},
    	mounted(){

    	},
    	methods: {
			shanchu: function(id) {
				this.$confirm('删除店铺会使已有订单失去订单来源，请慎重删除', '重要', {
				          confirmButtonText: '确定删除',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
				          this.loading = true
				          axios.post('/api/plan-market/out-store/delete', {
				          		id: id
				          	})
				          	.then(response => {
				          		if (response.data.msg.code == 0) {
				          			this.getlist()
				          		} else {
				          			this.$message.error(response.data.msg.info);
				          		}
				          	})
				        })
						
			},
        clearText(){
          this.loudannum = ''
        },
        seelogs(id,name){
          this.$router.push({
            path: "/order_catchlinshi/order_catchjdlogs",
            query: { id: id,name:encodeURIComponent(name) }
          });
        },
            loudanchoose:function(e){
              this.chooseid = e
              this.loudanlog = true
            },
            loudan:function(){
                var that = this
                var list = [this.loudannum]
                if(this.loudannum.indexOf('，') > -1){
                    list = this.loudannum.split('，')
                }
                if(this.loudannum.indexOf(',') > -1){
                    list = this.loudannum.split(',')
                }
                axios.post('/api/plan-market/out-store/order/refetch',{id:this.chooseid,orders:list})
                  .then(response => {
                    if(response.data.msg.code == 0){
                        that.$message({
                          message: '抓单已提交，请稍后查看。',
                          type: 'success'
                        });
                        that.clearText()
                        that.loudanlog = false
                    }else{
                        that.$message.error(response.data.msg.info);
                    }
                  })
            },
            //申请店铺
            addshaopf:function(){
              this.addshopname = this.addshopname.trim()
              if(!this.addshopname){
                this.$message.error('请填写店铺名')
                return
              }
              var that = this
                    axios.post('/api/plan-market/out-store/add',{name:this.addshopname,source:"jd"})
                      .then(response => {
                        if(response.data.msg.code == 0){
                          that.$message({
                                    message: '申请已发送，我们将在48小时内处理。',
                                    type: 'success'
                                  });
                    that.addshplog = false
                    that.addshopname = ""
                        }else{
                          that.$message.error(response.data.msg.info);
                        }
                      })
            },
            mobileshow:function(){
                var that = this
                axios.get('/api/plan-market/out-store/one?id='+this.mobileid)
                	.then(response => {
                		if(response.data.msg.code == 0){
                            that.mobile = response.data.data.mobile
                            that.mlog = true
                		}else{
                			that.$message.error(response.data.msg.info);
                		}
                	})
            },
    	    stop:function(id){
    	        var that = this
    	        axios.post('/api/plan-market/out-store/stop/fetch',{id:id})
    	        	.then(response => {
    	        		if(response.data.msg.code == 0){
    	        			that.$message.success('已停止抓单！');
    	                    that.loading = true
    	                    that.getlist()
    	        		}else{
    	        			that.$message.error(response.data.msg.info);
    	        		}
    	        	})
    	    },
    	    //点击登录和重复登录
    	    showlog:function(id){
    	        this.id = id
    	        this.log = true
                var that = this
                axios.get('/api/plan-market/out-store/one?id='+id)
                	.then(response => {
                		if(response.data.msg.code == 0){
                            that.cookies = response.data.data.cookie
                            that.time = [response.data.data.fetch_start_at,response.data.data.fetch_end_at]
                            // that.autotidan = response.data.data.autotidan
                		}else{
                			that.$message.error(response.data.msg.info);
                		}
                	})
    	    },
    	    //设置手机号
    	    gomobile:function(){
    	        var that = this
    	        axios.post('/api/plan-market/out-store/update',{source:'jd',mobile:this.mobile})
    	        	.then(response => {
    	        		if(response.data.msg.code == 0){
                            that.$message({
                              message: '手机号设置成功',
                              type: 'success'
                            });
                            that.mlog = false
    	        		}else{
    	        			that.$message.error(response.data.msg.info);
    	        		}
    	        	})
    	    },
          //开启抓单
          gocatch(id){
            this.id = id
            axios.post('/api/plan-market/out-store/updaterun',{id:this.id})
            	.then(response => {
            		if(response.data.msg.code == 0){
            			this.loading = true
                  this.getlist()
            		}else{
            			this.$message.error(response.data.msg.info);
            		}
            	})
          },
    	    //cookie登录
    	    gocookie:function(){
            this.cookies = this.cookies.trim()
    	        if(this.cookies == ""){
    	            this.$message('请填写cookie！');
    	            return false
    	        }
    	        if(this.time == "" || this.time == undefined){
    	            this.$message('请选择抓单时间！');
    	            return false
    	        }
              var that = this
              if(this.autotidan == false){
                this.autotidan = 0
              }else{
                this.autotidan = 1
              }
    	        axios.post('/api/plan-market/out-store/update',{id:this.id,cookie:this.cookies,fetch_start_at:this.time[0],fetch_end_at:this.time[1],is_check_id_card:this.autotidan,color:this.flag})
    	        	.then(response => {
    	        		if(response.data.msg.code == 0){
    	        			that.loading = true
    	        			that.log = false
    	                    that.getlist()
    	        		}else{
    	        			that.$message.error(response.data.msg.info);
    	        		}
    	        	})

    	    },
    	    //获取号码
    	    getlist:function(){
    	        var that = this
    	        axios.get('/api/gth/out-store/list?source=jd')
    	        	.then(response => {
						if(response.data.msg.code == 0){
							if(response.data.data != ''){
								for( var i in response.data.data){
                  if(response.data.data[i].is_cookie === 0){
                    response.data.data[i].stat = "不可用，请重新录入";
                  }
                  if(response.data.data[i].is_cookie === 1){
                    response.data.data[i].stat = "可用";
                  }
									// if(response.data.data[i].cookie != "" && response.data.data[i].is_run == 0 && response.data.data[i].is_login == 2){
									// 	response.data.data[i].stat = "已暂停抓单";
									// }
									// if(response.data.data[i].cookie != "" && response.data.data[i].is_run == 0 && response.data.data[i].is_login != 2){
									// 	response.data.data[i].stat = "cookie已失效，请重新输入开始抓单"
									// }
									// if(response.data.data[i].cookie == "" && response.data.data[i].is_run == 0){ response.data.data[i].stat = "未抓单"}
									// if(response.data.data[i].cookie != "" && response.data.data[i].is_run == 1){
									// 	response.data.data[i].stat = "正在努力抓单中..."
									// }
								}
								that.list = response.data.data
								that.mobileid = response.data.data[0].id
								that.loading = false
							}else{
								that.loading = false
							}

    	        		}else{
    	        			that.$message.error(response.data.msg.info);
    	        		}

    	        	})
    	    },
    	    //翻页
    	    fanye:function(page){
    	        this.loading = true
    	        this.getlist()
    	    }
        },
    }
</script>

<style lang="scss" scoped>
    .order_catchjd{
          @keyframes hua {
            0%{padding-left: 0px}
            100%{ padding-left: 30px}
          }
          .autotidan{ display: flex; margin-top: 20px;
              .xin{ flex-basis: 50px;
                .xins{color: #DD2727; animation: hua 2s infinite;}
              }
              .check{ flex-basis: 200px}
              .see{ flex-basis: 100px; color: #409EFF; cursor: pointer;}
            }
        .team{ background: #EAEAEA;
            .powertop{ display: flex; width: 640px;}
            .powertopli{ flex-basis: 160px; line-height: 45px; border-top: 4px #EAEAEA solid; color: #727272;  font-size: 14px; text-align: center;}
            .powertopact{ background: #FFFFFF; border-top: 4px #DD2727 solid;}
            .centerall{ padding: 20px; background: #FFFFFF; color: #666;

                .t-img{ margin-bottom: 20px; position: relative;
                    img{ width: 100%;}
                    .t-email{ position: absolute; background: #FFFFFF; color: #DD2727; right: 20px; padding: 5px 10px; top: 26px; cursor: pointer;}
                }
                .t-con{
                    .list{
                    	display: flex; text-align: center; color: #727272; line-height: 45px; border-top: 1px #EAEAEA solid; border-bottom: 1px #EAEAEA solid; margin-top: -1px;
                    	.th{ flex: 1; background: #F9F9F9; font-size: 14px; border-right:1px #EAEAEA solid; }
                    	.td{ flex: 1; font-size: 14px; border-right:1px #EAEAEA solid; }
                        .td2{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap;}
                        .el-button--danger{padding: 7px 15px!important;}
                        .td3{flex: 1.5;}
                    }
                    .el-pagination{ text-align: right; margin: 20px 0}
					.addshop{ text-align: center; padding: 20px 0;}
                }
                .getcookie{ background: #F8F8F8; padding: 20px; line-height: 30px; margin-top: 40px; border: 1px #e6e6e6 solid;}
            }
        }
        .cookiechange{margin-left: 5px;cursor: pointer;}

    }
</style>
